<template>
  <el-dialog
    :visible.sync="visible"
    :title="disabled ? '详情' : !dataForm.spid ? $t('add') : $t('update')"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="3%"
    width="60%"
    @close="close()"
    :destroy-on-close="true"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      <el-tab-pane label="购票须知" name="second"></el-tab-pane>
      <el-tab-pane label="景区介绍" name="third"></el-tab-pane>
    </el-tabs>
    <el-form
      style="height: 600px; overflow: auto; padding-right: 40px"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      :label-width="$i18n.locale === 'en-US' ? '150px' : '150px'"
      :disabled="disabled"
    >
      <el-row v-if="activeName == 'first'">
        <el-col :span="12">
          <el-form-item label="所属区域" prop="scenicId">
            <el-select
              v-model="dataForm.scenicId"
              placeholder="所属区域"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in scenicOptions"
                :key="item.id"
                :label="item.scenicName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="景区名称" prop="ismapId">
            <el-select
              v-model="dataForm.ismapId"
              clearable
              placeholder="请选择景区名称"
              style="width: 100%"
            >
              <el-option
                v-for="item in Scenicspotdata"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门票Id" prop="menpiaoId">
            <el-input
              v-model="dataForm.menpiaoId"
              placeholder="门票Id"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否热门" prop="isHot">
            <el-switch
              v-model="dataForm.isHot"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否能购买" prop="isBuy">
            <el-switch
              v-model="dataForm.isBuy"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起步价格" prop="startPrice">
            <el-input
              type="number"
              v-model="dataForm.startPrice"
              placeholder="起步价格"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开放时间" prop="openDate">
            <el-input
              v-model="dataForm.openDate"
              placeholder="开放时间"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="压力峰值" prop="pressures">
            <el-input
              v-model="dataForm.pressures"
              placeholder="压力峰值"
              type="number"
              min="0"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dataForm.startPrice > 0">
          <el-form-item label="停止入园时间" prop="stopSellDate">
            <el-time-picker
              style="width: 100%"
              v-model="dataForm.stopSellDate"
              value-format="HH:mm"
              format="HH:mm"
              placeholder="停止入园时间"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="activeName == 'first'">
        <el-col :span="12">
          <el-form-item label="建议" prop="suggestTime">
            <el-input
              v-model="dataForm.suggestTime"
              placeholder="建议游玩时间"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="特色描述" prop="remark">
            <el-input
              v-model="dataForm.remark"
              placeholder="特色描述"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签" prop="scenicLabels">
            <ren-select
              v-model="dataForm.scenicLabelsArr"
              multiple
              dict-type="scenic_labels"
              placeholder="请选择标签"
              style="width: 100%"
            ></ren-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="音视频名称" prop="audioVisualName">
            <el-input
              v-model="dataForm.audioVisualName"
              placeholder="景区地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="语音上传" prop="audioVisual">
            <el-upload
              ref="replaceUploader"
              :file-list="replaceList"
              v-model="dataForm.audioVisual"
              class="avatar-uploader"
              :action="url2"
              :limit="1"
              :multiple="false"
              :on-preview="handlePreview"
              :on-remove="
                (res, file, fileList) =>
                  handleRemove(res, file, fileList, 'audioVisual')
              "
              :on-exceed="handleExceed"
              :show-file-list="true"
              :on-success="
                (res, file, fileList) =>
                  handleReplaceAvatarSuccess(res, file, fileList, 'audioVisual')
              "
              :beforeUpload="beforeAvatarUpload"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传mp3文件，且不超过20M
              </div>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="VR上传" prop="vr">
            <el-upload
              ref="replaceUploader"
              :file-list="replaceList2"
              v-model="dataForm.vr"
              class="avatar-uploader"
              :action="url2"
              :limit="1"
              :show-file-list="true"
              :on-remove="
                (res, file, fileList) => handleRemove(res, file, fileList, 'vr')
              "
              :on-success="
                (res, file, fileList) =>
                  handleReplaceAvatarSuccess(res, file, fileList, 'vr')
              "
              :beforeUpload="beforeAvatarUpload"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传mp3文件，且不超过20M
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排行榜" prop="rankTop">
            <el-input
              v-model="dataForm.rankTop"
              placeholder="排行榜"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上榜理由" prop="rankRemark">
            <el-input
              v-model="dataForm.rankRemark"
              placeholder="上榜理由"
              type="textarea"
              :rows="2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="景区地址" prop="address">
            <el-input
              v-model="dataForm.address"
              placeholder="景区地址"
              type="textarea"
              :rows="2"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="购票须知" prop="ticketNotice">
            <el-input
              v-model="dataForm.ticketNotice"
              placeholder="购票须知"
              type="textarea"
              :rows="5"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="须知-注意事项" prop="note">
            <el-input
              v-model="dataForm.note"
              placeholder="须知-注意事项"
              type="textarea"
              :rows="5"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="须知-备注" prop="noticeRemark">
            <el-input
              v-model="dataForm.noticeRemark"
              placeholder="须知-备注"
              type="textarea"
              :rows="5"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="须知-运营时间" prop="">
            <div class="listItem" v-for="(item, index) in times" :key="index">
              <el-input v-model="item.month" placeholder="月份"></el-input>
              <el-input
                v-model="item.operateDate"
                placeholder="运营时间"
              ></el-input>
              <el-input
                v-model="item.intoDate"
                placeholder="关闭时间"
              ></el-input>
              <el-link
                type="danger"
                style="margin-left: 10px"
                @click="delTime(index)"
                >删除</el-link
              >
            </div>
            <el-button type="primary" @click="addTime()">新增</el-button>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
                <el-form-item label="须知-优待政策" prop="">
                    <div class="listItem2" v-for="(item, index) in preferentialPolicies" :key="index">
                        <el-input v-model="item.human" placeholder="人群" type="textarea" :rows="2"></el-input>
                        <el-input v-model="item.preferential" placeholder="优待政策" type="textarea" :rows="2"></el-input>
                        <el-input v-model="item.condition" placeholder="适用条件" type="textarea" :rows="2"></el-input>

                        <el-link type="danger" style="margin-left: 10px" @click="delPolicies(index)">删除</el-link>
                    </div>
                    <el-button type="primary" @click="addPolicies()">新增</el-button>
                </el-form-item>
            </el-col> -->
        <el-col :span="24">
          <p class="pdl60 pd_tip">
            <span class="tip">*</span> 景点缩略图<span
              >(支持png、jpg，建议尺寸318*318px，最多1张)</span
            >
          </p>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="coverImage">
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="
                (res, file) => handleAvatarSuccess(res, 'coverImage')
              "
              :before-upload="(file) => beforeUploadHandle(file, 'coverImage')"
            >
              <img
                v-if="dataForm.coverImage"
                :src="dataForm.coverImage"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <p class="pdl60">
            景点详情图<span>(支持png、jpg，建议尺寸750*610px，最多10张)</span>
          </p>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="">
            <el-upload
              :action="url"
              :file-list="fileList2"
              :limit="10"
              :before-upload="(file) => beforeUploadHandle(file, 'details')"
              list-type="picture-card"
              :on-success="successHandle2"
              :on-remove="handleRemove2"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible2">
              <img width="100%" :src="dialogImageUrl2" alt="" />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 购票须知 -->
      <template v-if="activeName == 'second'">
        <editor-vue
          :content="dataForm.ticketNotice"
          @EditorChange="getEditor2"
          ref="infoIntroduceRef2"
        ></editor-vue>
      </template>
      <!-- 景区介绍 -->
      <template v-if="activeName == 'third'">
        <editor-vue
          :content="dataForm.infoIntroduce"
          @EditorChange="getEditor"
          ref="infoIntroduceRef"
        ></editor-vue>
      </template>
    </el-form>
    <template slot="footer" v-if="!disabled">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
    <!-- 裁剪框 -->
    <cropper-dlg
      v-if="showCropper"
      :dialogVisible.sync="showCropper"
      :img-file="currentFile"
      ref="vueCropper"
      @upload="cropperUpload"
    ></cropper-dlg>
  </el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import editorVue from "@/components/editor";
export default {
  data() {
    return {
      url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      url2: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/tinymce/upload?access_token=${Cookies.get("access_token")}`,
      fileList: [],
      Scenicspotdata: [],
      scenicOptions: [],
      times: [], //运营时间
      replaceList: [],
      replaceList2: [],
      fileList2: [], //轮播图
      fileList1: [], //封面图
      visible: false,
      dialogVisible1: false,
      dialogImageUrl1: "",
      dialogImageUrl2: "",
      dialogVisible2: false,
      activeName: "first",
      dataForm: {
        id: "",
        audioVisual: "",
        audioVisualName: "",
        vr: "",
        vrName: "",
        ismapId: "", //景区名称对应的id
        menpiaoId: "",
        scenicId: "", //所属区域丢对应的id
        startPrice: null,
        pressures: 0,
        isBuy: 1,
        coverImage: "",
        openDate: "",
        stopSellDate: "",
        remark: "",
        suggestTime: "",
        address: "",
        ticketNotice: "",
        note: "",
        isScenicTicketPicDTOList: [],
        operateDate: "",
        noticeRemark: "",
        infoIntroduce: "",
        isHot: "",
        scenicLabels: "",
        scenicLabelsArr: [],
        rankTop: "",
        rankRemark: "",
      },
      currentFile: "",
      cropperIndex: null,
      showCropper: false, //裁剪弹框
      isCropper: true, //上传之前是否显示裁剪
    };
  },
  props: {
    disabled: Boolean,
  },
  created() {
    this.getScenicOptions();
    this.getjqdata();
  },
  components: {
    editorVue,
  },
  watch: {
    activeName(newval, oldval) {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          setTimeout(() => {
            this.activeName = "first";
          }, 500);
          return this.$message.error("请填写基本信息必填项");
        }
      });
      if (newval == "second") {
        this.$nextTick(() => {
          this.$refs.infoIntroduceRef2.init();
        });
      }
      if (newval == "third") {
        this.$nextTick(() => {
          this.$refs.infoIntroduceRef.init();
        });
      }
    },
    "dataForm.startPrice"(newval, oldval) {
      if (newval == 0) {
        this.dataForm.stopSellDate = "";
      }
    },
  },
  computed: {
    dataRule() {
      return {
        rankTop: [
          {
            required: false,
            message: "请输入正确数值",
            pattern: /^[0-9][0-9]*$/,
            trigger: "blur",
          },
        ],
        scenicId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        openDate: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        ismapId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        coverImage: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        startPrice: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    validateUsername(rule, value, callback) {
      if (value.length < 6) {
        callback(new Error("用户名长度不能小于6位"));
      } else {
        callback();
      }
    },
    getEditor2(val) {
      this.dataForm.ticketNotice = val;
    },
    getEditor(val) {
      this.dataForm.infoIntroduce = val;
    },
    handleAvatarSuccess(res, file) {
      this.replaceList = [
        {
          name: file.name,
          url: file.response.location,
        },
      ];
      this.dataForm.audioVisual = file.response.location;
      this.dataForm.audioVisualName = file.name;

      //  this.imageUrl = URL.createObjectURL(file.raw);
      // :on-success="(res, file, fileList)=>handleReplaceAvatarSuccess(res, file, fileList,'audioVisual')"
    },
    handleReplaceAvatarSuccess(res, file, fileList, key) {
      this.dataForm[key] = res.location;
      if (key == "vr") {
        this.replaceList2 = [
          {
            name: file.name,
            url: file.response.location,
          },
        ];
        this.dataForm.vrName = file.name;
      } else {
        this.replaceList = [
          {
            name: file.name,
            url: file.response.location,
          },
        ];
        this.dataForm.audioVisualName = file.name;
      }
    },
    handleRemove(res, file, fileList, key) {
      if (key == "vr") {
        this.replaceList2 = [];
        this.dataForm.vr = "";
        this.dataForm.vrName = "";
      } else {
        this.replaceList = [];
        this.dataForm.audioVisual = "";
        this.dataForm.audioVisualName = "";
      }
    },
    handlePreview(file) {},
    handleExceed(files, fileList) {},
    /**
     *上传文件限制--只能上传mp3格式的文件
     */

    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "mp3";
      if (!extension) {
        this.$message({
          message: "上传文件只能是mp3格式！",
          type: "error",
        });
      }
      return extension;
    },

    handleClick(e) {
      let that = this;
    },
    addTime() {
      this.times.push({
        month: "",
        operateDate: "",
        intoDate: "",
      });
    },
    delTime(i) {
      this.times.splice(i, 1);
    },
    // addPolicies() {
    //     this.preferentialPolicies.push({
    //         human: '',
    //         condition: '',
    //         preferential: ''
    //     });
    // },
    // delPolicies(i) {
    //     this.preferentialPolicies.splice(i, 1);
    // },
    // 上传之前
    beforeUploadHandle(file, name) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
      if (this.isCropper) {
        //显示裁剪
        this.currentFile = file;
        this.cropperIndex = name;
        this.showCropper = true;
        this.$nextTick(() => {
          this.$refs.vueCropper.init();
        });
        return false;
      }
    },
    cropperUpload(data) {
      this.showCropper = false;
      if (data != "close") {
        //裁剪成功后获取的图片
        this.$http.post("/oss/file/aliyunUpload", data).then((res) => {
          if (res.data.code == 0) {
            // 详情图多选
            if (this.cropperIndex == "details") {
              this.successHandle2(res.data);
            } else {
              //缩略图
              this.handleAvatarSuccess(res.data, "", this.cropperIndex);
            }
          }
        });
      }
    },
    handleRemove1(file, fileList) {
      this.fileList1 = fileList.map((item) => {
        return item;
      });
    },
    // 上传成功
    successHandle1(res, file, fileList, index) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      let key = "fileList" + index;
      this[key].unshift({
        name: "",
        url: res.data.url,
        picType: index,
      });
      if (index == 1) {
        this.dataForm.coverImage = res.data.url;
      }
    },
    handleAvatarSuccess(res, file, key) {
      this.dataForm[key] = res.data.url;
      this.$refs["dataForm"].clearValidate(key);
    },
    handleRemove2(file, fileList) {
      // this.fileList2 = fileList;
      this.fileList2 = fileList.map((item) => {
        return item;
      });
    },
    // 上传成功
    successHandle2(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.fileList2.unshift({
        name: "",
        url: res.data.url,
        picType: 2,
      });
    },
    close() {
      this.dataForm = {
        // id: "",
        audioVisual: "",
        audioVisualName: "",
        vr: "",
        menpiaoId: "",
        vrName: "",
        ismapId: "", //景区名称对应的id
        scenicId: "", //所属区域丢对应的id
        startPrice: null,
        pressures: 0,
        isBuy: 1,
        coverImage: "",
        openDate: "",
        stopSellDate: "",
        remark: "",
        suggestTime: "",
        address: "",
        ticketNotice: "",
        note: "",
        isScenicTicketPicDTOList: [],
        operateDate: "",
        noticeRemark: "",
        infoIntroduce: "",
        isHot: "",
        scenicLabels: "",
        scenicLabelsArr: [],
        rankTop: "",
        rankRemark: "",
      };
      this.$emit("changeDisabled");
    },
    init() {
      this.visible = true;
      if (this.dataForm.id) {
        this.dataForm.spid = this.dataForm.id;
      }
      this.$nextTick(() => {
        this.fileList1 = [];
        this.replaceList = [];
        this.replaceList2 = [];
        this.fileList2 = [];
        this.times = [];
        this.activeName = "first";
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.spid) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/scenic/isscenicspot/" + this.dataForm.spid)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          if (this.dataForm.scenicLabels) {
            this.dataForm.scenicLabelsArr =
              this.dataForm.scenicLabels.split(",");
          }
          this.times = JSON.parse(this.dataForm.operateDate);
          let fileList1 = this.dataForm.coverImage.split(",");
          fileList1.filter((item) => {
            this.fileList1.push({
              url: item,
            });
          });
          if (this.dataForm.vr) {
            this.replaceList2 = [
              {
                name: this.dataForm.vrName,
                url: this.dataForm.vr,
              },
            ];
          } else {
            this.replaceList2 = [];
          }
          if (this.dataForm.audioVisual) {
            this.replaceList = [
              {
                name: this.dataForm.audioVisualName,
                url: this.dataForm.audioVisual,
              },
            ];
          } else {
            this.replaceList = [];
          }

          if (this.dataForm.isScenicTicketPicDTOList) {
            this.dataForm.isScenicTicketPicDTOList.filter((item) => {
              this.fileList2.push({
                url: item.scenicPic,
              });
            });
          } else {
            this.dataForm.isScenicTicketPicDTOList = [];
            this.fileList2 = [];
          }
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        // if (
        //   !this.dataForm.scenicId ||
        //   !this.dataForm.ismapId ||
        //   !this.dataForm.coverImage ||
        //   this.dataForm.startPrice == null
        // ) {
        //   return this.$message.error("请填写基本信息必填项");
        // }
        // delete this.dataForm.preferentialPolicies;
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.dataForm.scenicLabels = this.dataForm.scenicLabelsArr.join(",");
          let itemVal = this.Scenicspotdata.filter(
            (item) => item.id == this.dataForm.ismapId
          );
          if (itemVal) {
            this.dataForm.scenicName = itemVal[0].name;
          }
          this.dataForm.isScenicTicketPicDTOList = [];
          this.dataForm.operateDate = JSON.stringify(this.times);
          this.fileList2.filter((item) => {
            this.dataForm.isScenicTicketPicDTOList.push({
              scenicPic: item.url,
            });
          });
          this.dataForm.id = this.dataForm.spid;
          this.$http[!this.dataForm.spid ? "post" : "put"](
            "/scenic/isscenicspot/",
            this.dataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch((err) => {
              console.log("err", err);
            });
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),

    handleRemove2(file, fileList) {
      this.fileList2 = fileList;
    },

    getjqdata() {
      this.$http
        .get("/sys/ismap/pageNoPro", {
          params: {
            type: 1,
            page: 1,
            limit: -1,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.Scenicspotdata = res.data.data.list;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicOptions = res.data;
          }
        });
    },
  },
};
</script>

<style></style>
<style lang="scss" scoped>
.pd_tip {
  padding-left: 47px;

  .tip {
    color: #f56c6c;
  }
}

::v-deep.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 336px;
}

// .aui-content .ql-container {
//     height: auto;
// }

.listItem,
.listItem2 {
  display: grid;
  margin-bottom: 10px;
  gap: 0 20px;
  grid-template-columns: 300px 200px 200px 40px;
}

.listItem2 {
  grid-template-columns: 200px 200px auto 40px;
}

::v-deep.avatar-uploader .el-upload {
  border: 0;
}

::v-deep.el-time-spinner__wrapper {
  width: 50% !important;

  &:last-child {
    display: none;
  }
}
</style>
